<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1 , minimum-scale=1.0,maximum-scale =1.0,user-scalable=no">
<title>快捷银行卡</title>
<script type="text/javascript" src="../js/zepto.min.js"></script>
<script type="text/javascript" src="../js/zepto.js"></script>

<style>
* {
	padding: 0;
	margin: 0;
	list-style: none;
}

header {
	background: #019EE4;
	border-bottom: 1px solid #ccc
}

header h2 {
	text-align: center;
	line-height: 45px;
	font-size: 14px;
	color: #fff
}

.list-ul {
	overflow: hidden
}

.list-li {
	line-height: 55px;
	border-bottom: 1px solid #fcfcfc;
	position: relative;
	padding: 0 12px;
	color: #666;
	background: #fff;
	-webkit-transform: translateX(0px);
}

.item-delete {
	position: absolute;
	top: 0;
	right: -80px;
	text-align: center;
	height: 80px;
	background: RED;
	color: #fff;
	width: 80px
}

.item-delete div {
	margin-top: 10px;
}

.center {
	background-color: #4775B7;
	height: 80px;;
	width: 92%;
	margin-top: 4%;
	margin-left: 4%;
}

.pic img {
	padding-top: 20px;
	position: absolute;
	margin-left: 5%;
	height: 35px;
	width: 43px;
}

.pic {
	position: relative;
	margin-left: 5%;
}

.bank_name {
	margin-left: 28%;
	color: #FFF;
	font-size: 16px;
}

.card_type {
	margin-left: 28%;
	color: #FFF;
	margin-top: -10%;
	font-size: 14px;
}

.all {
	width: 100%;
	height: 100%;
}

.head {
	height: 5%;
	background-color: #019EE4;
	text-align: center;
	font-size: 14px;
}

.return img {
	padding-top: 5%;
}

.bank {
	text-align: center;
	color: #FFF;
	font-size: 14px;
	padding-top: 8px;
}

#change {
	margin-top: -21.5%;
	margin-left: 60%;
	color: #FFF;
	font-size: 16px
}

.bottom {
	text-align: center;
}

.add {
	margin-top: 6%;
}

.add img {
	width: 240px;
}

.jia {
	margin-top: -5%;
	color: #019ee4;
}

.add1 {
	margin-top: -6.5%;
	margin-left: -30%;
}

.hidden {
	display: none;
}
</style>

<script type="text/javascript">
	var openID
	$(function() {
		openID = localStorage.getItem("ll_openID");
		/* 滑动事件  */
		$("#li").touchWipe({
			itemDelete : '.item-delete'
		});

		//点击添加银行卡，调到添加页面
		$("#add").click(function() {
			var sign = "1";
			window.location.href = "tianjiaxinyongka2.html?sign=" + sign;
		});

		$.ajax({
			url : '../llPay/getCards',
			type : 'post',
			data : {
				'openID' : openID,
				'cardType' : 'creditCard'
			},
			success : function(response) {
				if (response.length > 0) {
					var info = '';
					for (var i = 0, len = response.length; i < len; i++) {//遍历data数组
						var card_no;
						if (response[i].card_no.length < 19) {
							card_no = response[i].card_no.replace(/^(\d{6})\d{6}(\d+)/,"$1********$2");//掩码的卡号
						} else {
							card_no = response[i].card_no.replace(/^(\d{6})\d{9}(\d+)/,"$1********$2");//掩码的卡号	
						};
						info += '<li id="li" class="list-li">';
						info += 	'<div class="con">';
						info += 		'<div class="center" onclick="cardClick(this)">';
						info += 			'<div class="pic"><img src=""/></div>';
						info += 			'<div class="bank_name">'+response[i].bank_name+'</div>';
						info += 			'<div class="card_type">'+response[i].card_type+'</div>';
						info += 			'<div class="card_type">'+card_no+'</div>';
						info += 			'<div class="hidden">'+response[i].card_no+'</div>';
						info += 			'<div class="hidden">'+response[i].id+'</div>';
						info += 			'<div class="item-delete"><div>删除</div></div>';
						info +=			'</div>';
						info += 	'</div>';
						info += '<li>';
					};
					$(".list-ul").append(info);
				} else {
					alert("亲~您暂时没有任何的支付卡,请先添加银行卡。")
				};
			}
		});
	});
	
	//银行卡的点击事件
	function cardClick(div) {
		//获取div中数据	
		var divs = div.getElementsByTagName("div");
		var card_no = divs[4].innerHTML;
		var card_id = divs[5].innerHTML;
		
		var flag = confirm("你确定要删除该卡吗？");
		console.info(divs[2].innerHTML)
		if (flag == true) {
			$.ajax({
				url : "../llPay/deleteCredit",
				type : "post",
				data : {
					"id" : card_id
				},
				success : function(message) {
					if(message == 'success'){
						alert('删除成功');
						window.location.href = 'kuaijieyinhangkaguanli.html';
					}else{
						alert('删除失败');
					}
				}
			});
		} else {
			return false;
		}

	};
</script>
</head>

<body>
	<header>
		<h2>快捷支付银行卡</h2>
	</header>
	<section class="list">
		<ul class="list-ul">
			<li id="li" class="list-li">
				<div class="con"></div>
				<div class="item-delete">
					<div></div>
				</div>
			</li>
		</ul>
	</section>

	<div class="bottom" id="add">
		<div class="add">
			<img src="../img/button_add.png">
		</div>
		<div class="add1">
			<img src="../img/icon_add1.png">
		</div>
		<div class="jia">添加银行卡</div>
	</div>
</body>
</html>